<template>
    <div class="middle1">
      <div class="middle" v-for="i in reying" :key="i.id">
        <router-link :to="'/item/'+i.id">
          <img v-lazy="i.img" alt="">
          <ul class="d2">
            <li>{{i.nm}}</li>
            <li v-if="i.globalReleased&&i.sc!==0">观众评：<span :style="{color:'#faaf00'}">{{i.mk}}</span>分</li>
            <li v-if="!i.globalReleased&&i.sc===0"><span :style="{color:'#faaf00'}">{{i.wish}}</span>人想看</li>
            <li v-if="i.globalReleased&&i.sc===0">暂无评分</li>
            <li>{{i.desc}}</li>
            <li>{{i.showInfo}}</li>
          </ul>
          <button :style="{background:i.showStateButton.color}">{{i.showStateButton.content}}</button>
        </router-link>
        </div>
    </div>
</template>

<script>
//引入axios
import axios from "axios";
export default {
  name: "reying",
  data(){
    return{
      reying: []//保存热映电影的数组的数据
    };
  },
  mounted() {
    //使用axios 获取数据
    axios.get("/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4").then(res=>{
      res.data.data.hot.forEach(el=>{
        el.img = el.img.replace("w.h","128.180");
      });
      this.reying = res.data.data.hot
    });
  }
}
</script>

<style scoped>
.middle1{
  margin-top: 160px;
  margin-bottom: 55px;
}
.middle a{
  display: flex;
  align-items: center;
  width: 98%;
  background: white;
  overflow: scroll;
  text-decoration: none;
}
.d2 {
  width: 200px;
}

.d2 li {
  margin-bottom: 5px;
  margin-left: 10px;
  font-size: 14px;
  color: gray;
  list-style: none;
}
.d2 li span{
  font-weight: bolder;
  font-size: 16px;
}

.d2 li:nth-of-type(1) {
  color: #333333;
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bolder;
}


.middle img {
  width: 80px;
  height: 110px;
  margin-top: 5px;
  margin-left: 5px;
}

button {
  width: 60px;
  height: 40px;
  background: red;
  border-radius: 15px;
  border: none;
  color: white;
}
</style>